<template>
	<view class="wrapper" v-if="orderInfo.id">
		<Head leftIcon="left" title="订单详情"></Head>
		<view class="">
			<view class="infoBox">
				<view class="inforInner clearfix">
					<view :class="['img', orderInfo.service_type]"></view>
					<view class="text">
						<view class="t1 substring">{{ orderInfo.service_name }}</view>
						<view class="t2 substring">超值职聊次数叠加包</view>
					</view>
				</view>
			</view>

			<view class="splitLine" v-if="orderInfo.extra.jobname !== undefined"></view>
			<view class="jobLine clearfix" v-if="orderInfo.extra.jobname !== undefined">
				<view class="lable">推广职位</view>
				<view class="text">{{ orderInfo.extra.jobname }}</view>
			</view>
			<view class="splitLine" v-if="orderInfo.extra.jobname !== undefined"></view>

			<view class="splitLine" v-if="orderInfo.extra.tag_text !== undefined"></view>
			<view class="jobLine clearfix" v-if="orderInfo.extra.tag_text !== undefined">
				<view class="lable">使用标签</view>
				<view class="text">{{ orderInfo.extra.tag_text }}</view>
			</view>
			<view class="splitLine" v-if="orderInfo.extra.tag_text !== undefined"></view>

			<view class="serviceType">
				<view class="serviceLine clearfix">
					<view class="lable">服务内容</view>
					<view class="text">{{ orderInfo.service_type_text }}</view>
				</view>
				<view class="serviceLine clearfix">
					<view class="lable">服务金额</view>
					<view class="text">￥{{ orderInfo.service_amount }}</view>
				</view>

				<view class="serviceLine clearfix" v-if="orderInfo.extra.preferential_info !== undefined">
					<view class="lable">限时特惠</view>
					<view class="text">
						{{ orderInfo.extra.preferential_info.amount }}
						<text style="color:#999999;white-space:nowrap;">
							({{ orderInfo.extra.preferential_info.starttime | dateFilter }} 至 {{ orderInfo.extra.preferential_info.endtime | dateFilter }})
						</text>
					</view>
				</view>

				<view class="serviceLine clearfix" v-if="orderInfo.extra.coupon_info !== undefined">
					<view class="lable">优惠券</view>
					<view class="text">{{ orderInfo.extra.coupon_info.name }}</view>
				</view>

				<view class="serviceLine clearfix" v-if="orderInfo.extra.coupon_info !== undefined">
					<view class="lable">优惠券抵扣</view>
					<view class="text">￥{{ orderInfo.extra.coupon_info.face_value }}</view>
				</view>

				<view class="serviceLine clearfix" v-if="orderInfo.extra.service_added_discount !== undefined && orderInfo.extra.service_added_discount > 0">
					<view class="lable">专享折扣</view>
					<view class="text">增值服务{{ orderInfo.extra.service_added_discount }}折</view>
				</view>
				<view class="serviceLine clearfix" v-if="orderInfo.extra.service_added_discount !== undefined && orderInfo.extra.service_added_discount > 0">
					<view class="lable">折扣金额</view>
					<view class="text">￥{{ orderInfo.service_amount_after_discount }}</view>
				</view>

				<view class="serviceLine clearfix" v-if="orderInfo.service_type == 'points'">
					<view class="lable">充值{{ $store.state.config.points_byname }}</view>
					<view class="text">{{ orderInfo.extra.add_points }} {{ $store.state.config.points_byname }}</view>
				</view>

				<view class="serviceLine clearfix">
					<view class="lable">应付金额</view>
					<view class="text color">￥{{ orderInfo.amount }}</view>
				</view>
			</view>
			<view class="splitLine"></view>
			<view class="orderInfo">
				<view class="title">订单信息</view>
				<view class="orderLine clearfix">
					<view class="lable">订单编号：</view>
					<view class="text">{{ orderInfo.oid }}</view>
				</view>
				<view class="orderLine clearfix">
					<view class="lable">创建时间：</view>
					<view class="text">{{ orderInfo.addtime | timeFilter }}</view>
				</view>
				<view class="orderLine clearfix" v-if="orderInfo.status != 2">
					<view class="lable">付款时间：</view>
					<span class="text" v-if="orderInfo.status == 0">待付款</span>
					<view class="text" v-else>{{ orderInfo.paytime | timeFilter }}</view>
				</view>
				<view class="orderLine clearfix">
					<view class="lable">支付渠道：</view>
					<view class="text">{{ orderInfo.payment_text == '' ? '无' : orderInfo.payment_text }}</view>
				</view>
			</view>
			<view class="splitLine"></view>
			<view class="btns">
				<view class="btn btn1" v-if="orderInfo.status == 0" @click.stop="handlePay">继续支付</view>
				<view class="btn btn2" v-if="orderInfo.status == 0" @click.stop="handleOpenCancelDialog">取消订单</view>
				<view class="btn btn2 mg0" v-if="orderInfo.status == 2" @click.stop="handleOpenDelDialog">删除订单</view>
			</view>
		</view>
		<Dialog ref="cancelOrderDialog" title="系统提示" @confirm="handleCancelOrder"><view class="">确定取消该订单吗？</view></Dialog>
		<Dialog ref="delOrderDialog" title="系统提示" @confirm="handleDelOrder"><view class="">确定删除该订单吗？</view></Dialog>
		<!-- 立即支付弹窗 -->
		<PayDialog ref="PayDialog" :amount="orderInfo.amount" :isContinuesPay="true" :payParams="orderInfo"></PayDialog>
	</view>
</template>

<script>
import handlerHttpError from '@/utils/error';
import http from '@/utils/http';
import api from '@/api';
import { mapState } from 'vuex';
// import { parseTime } from '@/utils/index.js'
export default {
	data() {
		return {
			// 订单id
			id: 0,
			// 订单详情
			orderInfo: {}
		};
	},
	filters: {
		timeFilter(timestamp) {
			return parseTime(timestamp, '{y}-{m}-{d} {h}:{i}:{s}');
		},
		dateFilter(timestamp) {
			return parseTime(timestamp, '{m}-{d}');
		}
	},
	computed: {
		...mapState(['LoginType'])
	},
	onLoad(o) {
		this.id = o.id;
		this.getOrderShow();
	},
	methods: {
		// 获取订单详情
		getOrderShow() {
			if (this.LoginType == 1) {
				this.getCompanyOrderDetail();
			} else if (this.LoginType == 2) {
				this.getPersonalOrderDetail();
			}
		},
		// 获取企业订单详情
		getCompanyOrderDetail() {
			http.get(api.company_orderdetail, { id: this.id }).then(res => {
				if (res.code == 200) {
					this.orderInfo = res.data;
				}
			});
		},
		//获取个人订单详情
		getPersonalOrderDetail() {
			http.get(api.personal_orderdetail, { id: this.id }).then(res => {
				if (res.code == 200) {
					this.orderInfo = res.data;
				}
			});
		},
		// 打开取消订单提示弹窗
		handleOpenCancelDialog() {
			this.$refs.cancelOrderDialog.open();
		},
		// 取消订单
		handleCancelOrder() {
			if (this.LoginType == 1) {
				http.post(api.company_order_cancel, { id: this.orderInfo.id }).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
						setTimeout(() => {
							uni.navigateBack();
						}, 1600);
					}
				});
			} else if (this.LoginType == 2) {
				http.post(api.personal_order_cancel, { id: this.orderInfo.id }).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
						setTimeout(() => {
							uni.navigateBack();
						}, 1600);
					}
				});
			}
		},
		// 打开删除订单提示弹窗
		handleOpenDelDialog() {
			this.$refs.delOrderDialog.open();
		},
		// 删除订单
		handleDelOrder() {
			if (this.LoginType == 1) {
				http.post(api.company_order_del, { id: this.orderInfo.id }).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
						setTimeout(() => {
							uni.navigateBack();
						}, 1600);
					}
				});
			} else if (this.LoginType == 2) {
				http.post(api.personal_order_del, { id: this.orderInfo.id }).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
						setTimeout(() => {
							uni.navigateBack();
						}, 1600);
					}
				});
			}
		},
		// 继续支付
		handlePay() {
			this.$refs.PayDialog.open();
		}
	}
};
</script>

<style lang="scss" scoped>
.wrapper {
	width: 100%;
	height: 100%;
	.infoBox {
		padding: 30rpx 36rpx;
		.inforInner {
			padding: 33rpx 30rpx;
			box-shadow: 0px -8rpx 48rpx 0rpx rgba(202, 202, 202, 0.34);
			.img {
				margin-top: 8rpx;
				width: 66rpx;
				height: 74rpx;
				float: left;
				margin-right: 20rpx;
				background: #ccc;
				&.setmeal {
					// 开通套餐
					background: url('@/service/static/img/toolShopIcon6.png') no-repeat center center / 100% 100%;
				}
				&.points {
					// 充值积分
					background: url('@/service/static/img/toolShopIcon7.png') no-repeat center center / 100% 100%;
				}
				&.jobstick {
					// 职位置顶
					background: url('@/service/static/img/toolShopIcon1.png') no-repeat center center / 100% 100%;
				}
				&.emergency {
					//职位紧急
					background: url('@/service/static/img/toolShopIcon2.png') no-repeat center center / 100% 100%;
				}
				&.resume_package {
					// 简历增值包
					background: url('@/service/static/img/toolShopIcon3.png') no-repeat center center / 100% 100%;
				}
				&.im {
					// 职聊增值包
					background: url('@/service/static/img/toolShopIcon5.png') no-repeat center center / 100% 100%;
				}
				&.refresh_job_package {
					// 职位智能刷新
					background: url('@/service/static/img/toolShopIcon4.png') no-repeat center center / 100% 100%;
				}
				&.single_job_refresh {
					// 快捷支付-刷新职位
					background: url('@/service/static/img/toolShopIcon10.png') no-repeat center center / 100% 100%;
				}
				&.single_resume_down {
					// 快捷支付-下载简历
					background: url('@/service/static/img/toolShopIcon9.png') no-repeat center center / 100% 100%;
				}
				&.stick {
					//简历置顶
					background: url('@/service/static/img/toolShopIcon8.png') no-repeat center center / 100% 100%;
				}
				&.tag {
					// 简历醒目标签
					background: url('@/service/static/img/toolShopIcon11.png') no-repeat center center / 100% 100%;
				}
			}
			.text {
				width: 520rpx;
				float: left;
				.t1 {
				}
				.t2 {
				}
			}
		}
	}
	.jobLine {
		margin: 0 36rpx;
		padding: 30rpx 0;
		.lable {
			float: left;
			width: 160rpx;
		}
		.text {
			width: 518rpx;
			float: right;
			text-align: right;
		}
	}
	.serviceType {
		.serviceLine {
			margin: 0 36rpx;
			padding: 30rpx 0;
			.lable {
				float: left;
				width: 160rpx;
				font-size: 28rpx;
			}
			.text {
				width: 518rpx;
				float: left;
				text-align: right;
				font-size: 28rpx;
				&.color {
					color: #f53e3e;
				}
			}
		}
	}
	.orderInfo {
		.title {
			color: #333;
			font-size: 32rpx;
			font-weight: bold;
			padding: 36rpx 36rpx 0;
		}
		.orderLine {
			margin: 0 36rpx;
			padding: 30rpx 0;
			.lable {
				float: left;
				width: 160rpx;
				font-size: 28rpx;
			}
			.text {
				width: 518rpx;
				float: left;
				font-size: 28rpx;
			}
		}
	}
	.splitLine {
		height: 10rpx;
		background: #f8f8f8;
	}
	.btns {
		margin: 0 36rpx;
		padding: 47rpx 0 20rpx;
		.btn {
			text-align: center;
			height: 78rpx;
			line-height: 78rpx;
			text-align: center;
			font-size: 28rpx;
			border-radius: 10rpx;
			&.btn1 {
				color: #fff;
				background: #eb6765;
			}
			&.btn2 {
				margin-top: 20rpx;
				color: #333;
				background: #eeeeee;
			}
			&.mg0 {
				margin-top: 0;
			}
		}
	}
}
</style>
